<template>
    <div>
        <h1>Home</h1>
        <div> 不推荐....XXXXXXXXXXx
            直接调用countStore:
            num:{{useMyCounterStore().num}}
            {{useMyCounterStore().isOdd}}
            <button @click="useMyCounterStore().add(3)">add+3</button>
            <button @click="useMyCounterStore().asyncAdd(2)">AsyncAdd+2</button>
        </div>
        <div>
            映射之后调用:
            num:{{num}} {{isOdd}} <button @click="add(3)">add 3</button><button @click="asyncAdd(2)">asyncadd 2</button>
        </div>
        <div>
            userStore:{{age}}{{isOlder}} <button @click="setAgeUp(1)">add age+1</button>
            <button @click="setAgeDown(2)">add age -2</button>
        </div>
    </div>
</template>

<script>
//在组件调用 pinia的store  useMyCounterStore是一个useStore函数
//选项式API
import useMyCounterStore from '../store/useMyCounterStore';
import useUserStore from '../store/useUserStore';
import { mapState,mapActions } from 'pinia';
    export default {
        data(){
            return {
                useMyCounterStore
            }
        },
        created(){
            // useMyCounterStore().$patch({});
            // console.log("useMyCounterStore ===>",useMyCounterStore())
        },
        //把pinia里面的数据映射成 计算属性 把里面方法映射成 methods
        // pinia也支持 用快捷函数 快速把数据和方法映射到当前组件
        computed:{
            // num(){ 
            //     return useMyCounterStore().num;
            // },
            ...mapState(useMyCounterStore,["num"]), //快速映射
            ...mapState(useUserStore,['age','isOlder']), //不同模块 要重新开启映射
            // isOdd(){ return useMyCounterStore().isOdd; }
            ...mapState(useMyCounterStore,["isOdd"]) //getters还是用mapState映射
        },
        methods:{
            // add(n){ return useMyCounterStore().add(n);},
            // asyncAdd(n){return useMyCounterStore().asyncAdd(n);}
            ...mapActions(useMyCounterStore,["add",'asyncAdd']),
            ...mapActions(useUserStore,['setAgeUp',"setAgeDown"])
        }
    }
</script>

<style lang="scss" scoped>

</style>